<template>
	<view style="padding: 50rpx;">
		<view class="gui-flex gui-column header gui-align-items-center gui-justify-content-center">
			<view class="gui-flex gui-align-items-center gui-justify-content-center">
				<!-- &#xe620; -->
				<image src="../../static/logo-header.png" class="logo-header"></image>
			</view>
			<view class="gui-h1 gui-bold title-header">天泰云平台</view>
		</view>
		<view class="infoInput">
			<form @submit="submit">
				<view class="info gui-flex gui-row gui-align-items-center">
					<view class="gui-icons Icon gui-color-gray">
						&#xe6fe;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%">
						<input type="text" name="username" placeholder="请输入用户名" v-model="username" />
					</view>
				</view>
				<view class="info gui-flex gui-row gui-align-items-center">
					<view class="gui-icons Icon gui-color-gray">
						&#xe630;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%">
						<input type="password" name="password" placeholder="请输入密码" v-model="password" />
					</view>
				</view>
				<view style="margin-top:38rpx;">
					<button type="default" class="gui-button" formType="submit"
						style="border-radius:50rpx;background-color: #007AFF;">
						<text class="gui-color-white gui-button-text">登 录</text>
					</button>
				</view>
			</form>
			<view style="margin-top: 38rpx;" class="gui-flex gui-rows gui-justify-content-center">
				<view>
					<text class="gui-text gui-color-black gui-block-text" @tap="registerbyuser">用户注册</text>
				</view>
				<view style="margin: 0rpx 20rpx;">
					<text class="gui-text gui-color-black gui-block-text">|</text>
				</view>
				<view>
					<text class="gui-text gui-color-black gui-block-text" @tap="loginbymsg">短信登录</text>
				</view>
				<view style="margin: 0rpx 20rpx;">
					<text class="gui-text gui-color-black gui-block-text">|</text>
				</view>
				<view>
					<text class="gui-text gui-color-black gui-block-text" @tap="forgetPwd">忘记密码</text>
				</view>
			</view>
		</view>
		<view class="gui-flex gui-rows gui-nowrap gui-align-items-center" style="margin-top:80rpx;">
			<view class="gui-title-line"></view>
			<text class="gui-color-gray gui-h6" style="padding-left:50rpx; padding-right:50rpx;"
				@tap="toabout">关于平台</text>
			<view class="gui-title-line"></view>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import graceChecker from "@/Grace6/js/checker.js";
	import ybgolbal from '../../lib/js/ybgolbal';
	const ybapi = ybgolbal.getybapi(getCurrentInstance());
	let username = ref('');
	let password = ref('');

	function forgetPwd() {
		// 跳转忘记密码页面
		uni.navigateTo({
			url: "/pages/forgetpassword/forgetpassword"
		})
	}

	function loginbymsg() {
		// 跳转短信登录页面
		uni.navigateTo({
			url: "/pages/login/loginmsg"
		})
	}

	function registerbyuser() {
		// 跳转注册页面
		uni.navigateTo({
			url: "/pages/register/register"
		})
	}

	function toabout() {
		// 跳转关于页面
		uni.navigateTo({
			url: "/pages/about/about"
		})
	}

	function submit(e) {
		// 表单数据
		console.log(e);
		console.log(username.value)
		var formData = e.detail.value;
		console.log(formData)
		console.log(ybapi)
		// 利用 graceUI 的表单验证工具进行验证
		//定义表单规则
		var rule = [
			{name:"username", checkType : "string", checkRule:"1,50", errorMsg:"登录账户不能为空"},
			{name:"password", checkType : "string", checkRule:"1,100", errorMsg:"登录密码不能为空"},
		];
		var checkRes = graceChecker.check(formData, rule);
		if(checkRes){
			ybapi.Login_Userlogin(formData.username,formData.password,function(res){
				console.log(res)
				uni.showToast({
					title: "登录成功",
					icon: "none"
				});
				// 跳转主页
				uni.switchTab({
					url: "/pages/products/products"
				})
			},function(e){
				uni.showToast({
					title: e,
					icon: "none"
				});
				username.value = '';
				password.value = '';
			})
		}else{
			uni.showToast({
				title: graceChecker.error,
				icon: "none"
			});
		}
	}
</script>

<style>
	.header {
		height: 600rpx;
	}

	.logo-header {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.title-header {
		color: #007AFF;
		margin-top: 50rpx;
	}

	.infoInput {
		padding: 20rpx;
	}

	.Icon {
		font-size: 25px;
	}

	.info {
		height: 50px;
		padding: 0rpx 10rpx;
		border-bottom: 1rpx solid gray;
	}
</style>